<template>
	<div class="rightnav">
		<div class="rightfloat">
            <router-link to="/Luckdraw" class="button luckdrawbtn"><img src="../assets/images/giftbtn.png">抽奖</router-link>
            <!--<a class="button follow" @click="wxcodeImg"><img src="../assets/images/weixinguanzhu.png">送金币</a>-->
            <router-link to="/Notice" class="button"><img src="../assets/images/noticeico.png">攻略</router-link>
        </div>
        <div class="rightfixe" v-show="wxcodeShow">
            <div class="weixinguanzhubox">
                <button class="closebtn" @click="wxcodeClose"><img src="../assets/images/login-close.png"></button>
                <div class="weixincontent">
                    <div class="itemc">微信关注梦想抓娃娃</div>
                    <div class="itemd">首次关注即可获得<span>50</span>金币</div>
                    <div class="img"><img src="../assets/images/codeimg.jpg?v=1"></div>
                    <div class="text">长按识别二维码</div>
                </div>
            </div>
        </div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return {
				wxcodeShow:false,
			}
		},
		methods:{
			wxcodeImg(){
				this.wxcodeShow = true
			},
			wxcodeClose(){
				this.wxcodeShow = false
			}
		}
	}
</script>

<style scoped>
	.rightfloat {
	    position: fixed;
	    bottom: 100px;
	    right: 0px;
	    padding: 10px 5px;
	    background: rgba(250, 190, 27, 0.76);
	    text-align: center;
	}

	.rightfloat .button {
	    display: block;
	    width: 36px;
	    margin: 0 auto;
	    font-size: 12px;
	    color: #545454;
	}

	.rightfloat .button img {
	    width: 100%;
	}

	.rightfixe {
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.5);
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 10;
	}
	.weixinguanzhubox {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    margin-top: -235px;
	    margin-left: -150px;
	    width: 300px;
	    height: 470px;
	    background: url(../assets/images/alertbg.png) no-repeat center;
	    background-size: 100%;
	}

	.weixinguanzhubox .closebtn {
	    width: 40px;
	    height: 40px;
	    position: absolute;
	    right: 0px;
	    top: -5px;
	    background: transparent;
	    border: 0;
	}

	.weixincontent {
	    padding-top: 180px;
	    text-align: center;
	}
	.weixincontent .img {
	    width: 100%;
	    padding-top: 10px;
	}

	.weixincontent .itemc {
	    font-size: 16px;
	}

	.weixincontent .itemd {
	    font-size: 16px;
	    font-weight: 600;
	}

	.weixincontent .itemd span {
	    color: #ff8400;
	    font-size: 20px;
	    font-weight: 600;
	}

	.weixincontent .img img {
	    width: 60%;
	    margin: 0 auto;
	    display: block;
	    cursor: pointer;
	}

	.weixincontent .text {
	    font-size: 16px;
	    line-height: 35px;
	    color: #666;
	}
	@media screen and (max-width: 300px) {
	    .weixinguanzhubox {
	        width:100%;
	    }
	}
</style>